import { useLocation } from "umi";
import { useEffect } from "react";
import { useReactive } from "ahooks";
import dayjs from "dayjs";
import { Space, Descriptions, Typography, message } from "antd";

import useOneStaff from "../../hooks/staff/useOneStaff";
import useUpdateStaff from "../../hooks/staff/useUpdateStaff";

const ContractInformation = () => {
    const location = useLocation();

    const { staff, loadOneStaff } = useOneStaff();
    const { updateStaff } = useUpdateStaff();

    useEffect(() => {
        location.state?.staff?.osUuid && loadOneStaff(location.state?.staff?.osUuid);
    }, [location.state?.staff]);

    const updateStaffValue = async (values) => {
        values.osUuid = staff.osUuid;
        let res = await updateStaff(values);
        if (res) {
            message.success("成功保存设置信息");
            loadOneStaff(staff.osUuid);
        }
    };

    const updateContractPeriod = (value, key, keyValue) => {
        if (!dayjs(value).isValid()) return message.warning("输入的日期格式不正确，请重新输入");
        staff.cpInfo[key] = { ...staff.cpInfo[key], ...keyValue };
        updateStaffValue({ cpInfo: staff.cpInfo });
    };

    if (!staff?.osUuid) return <></>;

    return (
        <Space direction="vertical" style={{ padding: 10, width: "100%" }} size={10}>
            <Descriptions column={1} bordered labelStyle={{ width: 140 }}>
                <Descriptions.Item label="基本月工资">
                    <Typography.Text editable={{ onChange: (value) => updateStaffValue({ bmSala: value }) }} style={{ marginBottom: 0 }}>
                        {staff.bmSala ? helper.numberFormat(staff.bmSala) : "0.00"}
                    </Typography.Text>
                </Descriptions.Item>
                <Descriptions.Item label="日工资金额">
                    <Typography.Text editable={{ onChange: (value) => updateStaffValue({ daSala: value }) }} style={{ marginBottom: 0 }}>
                        {staff.daSala ? helper.numberFormat(staff.daSala) : "0.00"}
                    </Typography.Text>
                </Descriptions.Item>
                <Descriptions.Item label="全勤天数">
                    <Typography.Text editable={{ onChange: (value) => updateStaffValue({ fuDays: value }) }} style={{ marginBottom: 0 }}>
                        {staff.fuDays ? helper.numberFormat(staff.fuDays, 0) : "0"}
                    </Typography.Text>
                </Descriptions.Item>
                <Descriptions.Item label="社保缴费基数">
                    <Typography.Text editable={{ onChange: (value) => updateStaffValue({ ssBase: value }) }} style={{ marginBottom: 0 }}>
                        {staff.ssBase ? helper.numberFormat(staff.ssBase, 0) : "0"}
                    </Typography.Text>
                </Descriptions.Item>
                <Descriptions.Item label="合约期" contentStyle={{ padding: 0 }}>
                    <Descriptions column={2} bordered labelStyle={{ width: 140 }} contentStyle={{}}>
                        <Descriptions.Item label="实习开始日期">
                            <Typography.Text
                                editable={{ autoSize: true, onChange: (value) => updateContractPeriod(value, "internshipPeriod", { startDate: value }) }}
                                style={{ marginBottom: 0 }}
                            >
                                {staff.cpInfo?.internshipPeriod?.startDate ? dayjs(staff.cpInfo?.internshipPeriod?.startDate).format("YYYY年MM月DD日") : ""}
                            </Typography.Text>
                        </Descriptions.Item>
                        <Descriptions.Item label="实习结束日期">
                            <Typography.Text editable={{ onChange: (value) => updateContractPeriod(value, "internshipPeriod", { endDate: value }) }} style={{ marginBottom: 0 }}>
                                {staff.cpInfo?.internshipPeriod?.endDate ? dayjs(staff.cpInfo?.internshipPeriod?.endDate).format("YYYY年MM月DD日") : ""}
                            </Typography.Text>
                        </Descriptions.Item>

                        <Descriptions.Item label="正式开始日期">
                            <Typography.Text editable={{ onChange: (value) => updateContractPeriod(value, "formalPeriod", { startDate: value }) }} style={{ marginBottom: 0 }}>
                                {staff.cpInfo?.formalPeriod?.startDate ? dayjs(staff.cpInfo?.formalPeriod?.startDate).format("YYYY年MM月DD日") : ""}
                            </Typography.Text>
                        </Descriptions.Item>
                        <Descriptions.Item label="正式结束日期">
                            <Typography.Text editable={{ onChange: (value) => updateContractPeriod(value, "formalPeriod", { endDate: value }) }} style={{ marginBottom: 0 }}>
                                {staff.cpInfo?.formalPeriod?.endDate ? dayjs(staff.cpInfo?.formalPeriod?.endDate).format("YYYY年MM月DD日") : ""}
                            </Typography.Text>
                        </Descriptions.Item>
                    </Descriptions>
                </Descriptions.Item>
                <Descriptions.Item label="签约职位">
                    <Typography.Text editable={{ onChange: (value) => updateStaffValue({ cpPosi: value }) }} style={{ marginBottom: 0 }}>
                        {staff.cpPosi || ""}
                    </Typography.Text>
                </Descriptions.Item>
            </Descriptions>
        </Space>
    );
};

export default ContractInformation;
